<template>
	<view class="selectLeader">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{blockTitle()}}</block>
		</cu-custom>
		<view class="queryBox">

			<u-search class="hzuni-search-bar" v-model="keywords" @custom="searchLeader"
				@search="searchLeader"></u-search>

			<button type="primary" class="determineBtn" @click="determineLeader">确定</button>
		</view>

		<scroll-view scroll-y="true" class="leaderList" :style="{'height': scrollHeight}" :lower-threshold="10"
			@scrolltolower="getMore">
			<view v-if="total > 0">
				<view class="leaderItem" v-for="(item,index) in leader" :key="item.id" @click="changeSelType(item)">
					<view class="leaderNoSelected">
						<u-icon v-if="selectedItem.id == item.id" name="checkbox-mark" color="#F44336"
							size="36rpx"></u-icon>
					</view>

					<view class="leaderX">{{firstText(item.name)}}</view>

					<view class="leaderInfo">
						<text class="leaderName">{{item.name }}</text>
						<text class="leaderCompany">{{companyMes(item)}}</text>
					</view>
				</view>
				<have-botton v-if="!more"></have-botton>
			</view>
			<view v-else class="lapp-result-none">
				<img src="http://www.yunzhijia.com/lightapp/images/result-none.png"><span>暂无可选数据</span>
			</view>

		</scroll-view>


	</view>
</template>

<script>
	import {
		getTodoAction,
		getUser,
		getCompanyId,
	} from '../../network/service/addressBook.js';
	export default {
		name: 'SelectLeader',
		data() {
			return {
				total: 0, //总数据量
				amount: 10, //每页数据量
				pageNum: 1, //当前页码
				more: true,
				roleId: '',
				InterfaceType: 0,
				topHeight: 0,
				scrollHeight: '',
				flag: '', //用来标记选择类型
				type: 'text', //搜索框类型
				keywords: '', //搜索框内容
				leader: [], //查询结果
				selectedItem: '', //选中列表项
				pageInfo: '',
			}
		},
		computed: {
			firstText() {
				return (value) => {
					return value.substr(0, 1)
				}
			},
			companyMes() {
				return (value) => {
					return value.number + ' ～ ' + value.name

				}
			},

		},
		methods: {
			blockTitle() {
				if (this.flag == 'proInfo') {
					return '选择项目'
				}
				return ''
			},
			// 改变搜索框模式
			changeType() {
				this.type = 'input'
			},

			//改变列表的选中状态
			changeSelType(value) {
				this.selectedItem = value
			},

			//搜索
			searchLeader() {
				this.InterfaceType = 1
				this.pageNum = 1
				this.leader = []
				this.selectedItem = ''
				this.getSelectInformationList(this.pageInfo)
			},

			// 清除搜索框
			clearSearchText() {
				this.keywords = ''
				this.type = 'text'
				this.InterfaceType = 0
				this.pageNum = 1
				this.leader = []
				this.selectedItem = ''
				this.getSelectInformationList(this.pageInfo)
			},

			//确定选中的员工，并将选中的员工的个信息传给要返回的页面
			determineLeader() {
				if (this.selectedItem) {
					const eventChannel2 = this.getOpenerEventChannel()
					eventChannel2.emit("selectInformationResult", {
						data: this.selectedItem
					});
					uni.navigateBack({
						delta: 1
					})
					this.leader = ''
				} else {
					uni.showToast({
						title: '请选择具体的内容后再确定',
						icon: 'none'
					})
					return false
				}

			},

			// 滚动加载更多
			getMore() {
				if ((this.pageNum - 1) * this.amount >= this.total) {
					this.more = false
					return
				}
				uni.showLoading({
					title: '更多数据正在赶来...'
				})
				// 请求加载的数据

				this.getSelectInformationList(this.pageInfo)
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			},

			// 查询信息
			getSelectInformationList(arr) {
				this.more = true
				let that = this
				let keyWord = this.keywords
				const type = arr.data
				var url = '/project/getProByTeam'
				var data = {
					pageNo: that.pageNum,
					pageSize: that.amount,
					companyId: getCompanyId(),
					uid: getUser().id,
					person: getUser().person,
					keyWord,
				}
				let params = {
					url,
					method: 'post',
					data,
				}
				getTodoAction(params).then(res => {
					that.total = res.data.total
					that.leader = [...that.leader, ...res.data.list]
					that.pageNum++

				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none',
						duration: 3000
					});
				})
			}

		},
		onLoad(option) {
			// this.leader = this.$store.state.people
		},
		onReady() {
			let screenW = 0
			let screenH = 0
			uni.getSystemInfo({
				success(res) {
					screenW = res.windowWidth
					screenH = res.windowHeight
				}
			})

			uni.createSelectorQuery().select('.queryBox').boundingClientRect(data => {
				this.topHeight = data && data.height ? data.height : 60
			}).exec()

			this.scrollHeight = (screenH - 80 - this.topHeight) * (750 / screenW) + 'rpx'
		},
		onShow() {
			let that = this
			that.selectedItem = ''
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('selectInformation', function(res) {
				that.flag = res.data
				that.pageInfo = res
				that.getSelectInformationList(res)

			})
		}
	}
</script>

<style scoped>
	/* .selectLeader {
		background-color: #FFFFFF;
		min-height: 100vh;
	} */
	/* .topHei{
		flex: 1;
		align-items: center;
		height: 80rpx;
	} */
	.queryBox {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}

	.hzuni-search-bar {
		flex: 1;
		align-items: center;
	}

	/deep/.uni-searchbar {
		flex: 1;
		align-items: center;
	}

	/deep/.uni-searchbar__box {
		height: 60rpx;
		border: none;
	}

	.queryBox .screen {
		margin: 0 20rpx;
		padding: 0 25rpx;
		display: flex;
		align-items: center;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1rpx solid #e5e5e5;
	}

	.searchBox {
		/* flex: 1;
		display: flex;
		align-items: center; */
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}

	.determineBtn {
		padding: 0 28rpx;
		margin: 0 10rpx 0 0;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		background-color: #007AFF;
	}

	.searchIn1 {
		flex: 1;
		margin: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		justify-content: center;
	}

	.searchIn2 {
		flex: 1;
		margin: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
	}

	/* .searchIn2 {
		position: relative;
		padding-left: 20rpx;
		
	} */
	.cleanIcon {
		position: absolute;
		right: 10rpx;
	}

	.leaderList {
		background-color: #FFFFFF;
	}

	.leaderList .leaderItem {
		margin: 0 20rpx;
		padding: 40rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(240, 240, 240, .5);
	}

	.leaderList .leaderItem .leaderNoSelected {
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #DDDDDD;
		border-radius: 50%;
	}

	.isSelected {
		background-color: pink;
	}

	.leaderList .leaderItem .leaderX {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		font-size: 35rpx;
		color: #FFFFFF;
		background-color: #DDDDDD;
	}

	.leaderList .leaderItem .leaderInfo {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: start;
	}

	.leaderList .leaderItem .leaderInfo .leaderName {
		font-size: 30rpx;
		transform: scale(0.9);
	}

	.leaderList .leaderItem .leaderInfo .leaderCompany {
		font-size: 24rpx;
		transform: scale(0.9);
	}


	.leaderList .lapp-result-none {
		position: absolute;
		top: 30%;
		left: 50%;
		width: 160px;
		margin-left: -80px;
	}

	.leaderList .lapp-result-none>img {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0px auto;
	}

	.leaderList .lapp-result-none>span {
		display: block;
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		color: rgb(128, 128, 128);
	}
</style>